<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../demo.css">
	<script type="text/javascript" src="../../../../jquery.min.js"></script>
	<script type="text/javascript" src="../../../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../../../jquery.serializeObject.js"></script>
	<script type="text/javascript" src="jquery.parseurl.min.js"></script>
	<script src="../xheditor/xheditor-1.2.2.min.js"  type="text/javascript" charset="utf-8"></script>
	<script src="../xheditor/xheditor_lang/zh-cn.js"  type="text/javascript" charset="utf-8"></script>

</head>
<body>
	
	<table id="dg"></table>
	<!--菜单按钮-->
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addPop()">添加</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deletePop()">删除</a>
			keywords: <input class="easyui-textbox" style="width:150px" name="keywords" id="keywords">
			<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="keySearch()">搜索</a>
		</div>
	</div>
	<!--是否确定删除-->
	<div id="w" class="easyui-window" title="Window Layout" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:200px;padding:5px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'" style="padding:10px;">
				Are you sure you want to delete it ?
			</div>
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="removeMessage()" style="width:80px">确定</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="cancelRemove()" style="width:80px">取消</a>
			</div>
		</div>
	</div>
	<!--修改内容的弹框-->
	<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:400px;padding:10px">
        <!--form-->
        <form id="ff" method="post">
            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'Title:',required:true">
            </div>
            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'Author:',required:true">
            </div>
             <div style="margin-bottom:15px">
             		Content:
                	<!--xheditor-->
                	<textarea  name="content" class="xheditor" rows="8" cols="2" style="width: 100%"></textarea>
            </div>
             <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="comment" style="width:100%" data-options="label:'Comment:',required:true">
            </div>
            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="sort" style="width:100%" data-options="label:'Sort:',required:true">
            </div>
            <div style="margin-bottom:15px">
                <input type="text" name="_id" class="easyui-textbox" style="width:100%"/>
            </div>
        </form>
        <!--button-->
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
	
</body>
</html>
<script type="text/javascript">
	
	//表单
	function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
            	if($(this).form('enableValidation').form('validate')){

            		var data = $("#ff").serializeObject();
//          		console.log(data._id && data._id.trim().length>0)
            		if(data._id && data._id.trim().length>0){
            			// editMode
            			$.ajax({
                			method:'put',
                			url:'http://localhost:3000/news/data/' + data._id,
                			data: data
                		}).done(function(res){
                			$('#dlg').dialog('close')
                			$('#dg').datagrid('reload'); 
                		})
            		}else{
            			// addMode
            			delete data._id;//新增的时候id不能存在
                		$.ajax({
                			method:'post',
                			url:'http://localhost:3000/news/data',
                			data: data
                		}).done(function(res){
                			$('#dlg').dialog('close')
                			$('#dg').datagrid('reload'); 
                		})
            		}
            	}else{
            		$.messager.show({
		                title:'信息提示',
		                msg:'表单验证失败',
		                showType:'show'
		            });
            	}
            }
        });
    }
    function clearForm(){
        $('#ff').form('clear');
    }
	function removeMessage(){
		
		var gss = $("#dg").datagrid('getSelections');
        	var ids = [];
        	for(var i=0;i<gss.length;i++){
        		ids.push(gss[i]._id);
        	}

			$.ajax({
        		url:'http://localhost:3000/news/deletes',
        		method:'post',
        		data: {ids: ids.toString()}
        	}).done(function(res){
//      		console.log(res.status)
				$('#w').dialog('close') 
                $('#dg').datagrid('reload'); 
        		if(res.status === 200){
        			$.messager.show({
			                title:'信息提示',
			                msg:'删除数据成功',
			                showType:'show'
			            });
        		}else{
        			$.messager.show({
			                title:'信息提示',
			                msg:'请选择要删除的数据',
			                showType:'show'
			            });
        		}
        		$("#dg").datagrid("reload");
        	})
		
	}
	var newsId=$.parseUrl(window.location.href).query.id;
	console.log(newsId);
	$('#dg').datagrid({
			rownumbers:true,
			toolbar:'#tb',
			pagination:true,
			checkbox:true,
			fit:true,
			method:'post',
		    url:'http://localhost:3000/news/list',
		    queryParams:{
		    	typeId:newsId
		    },
		    columns:[[
		    	{field:'ck',checkbox:true},
		    	{field:'typeId',title:'类别',width:100},
			    {field:'title',title:'标题',width:100},
			    {field:'author',title:'作者',width:80},
			    {field:'date',title:'日期',width:200},
			    {field:'content',title:'摘要',width:200},
			    {field:'comment',title:'评论数',width:50},
			    {field:'opt',title:'操作', width:80,
					formatter: function(value,row,index){
						return "<a href='javascript:void(0)' onclick='editData("+JSON.stringify(row)+")'>编辑</a> <a href='javascript:void(0)' onclick='deletePop()'>删除</a><a href='javascript:void(0)' onclick=''>评论</a>"
					}
				}
		    ]],
		    onDblClickRow(index,row){
		    	editData(row);
		    }
		});
	function editData(row){
		
		$('#ff').form('load',row);//加载数据
		
		$('#dlg').dialog('open');
	}
	function addPop(){
		$('#dlg').dialog('open');
	}
	function keySearch(){
		var keywords = $('#keywords').val();
		$('#dg').datagrid({
			rownumbers:true,
			toolbar:'#tb',
			pagination:true,
			checkbox:true,
			fit:true,
			method:'post',
		    url:'http://localhost:3000/news/list',
		    queryParams:{
		    	title:keywords
		    },
		    columns:[[
		    	{field:'ck',checkbox:true},
			    {field:'title',title:'标题',width:100},
			    {field:'author',title:'作者',width:80},
			    {field:'date',title:'日期',width:200},
			    {field:'sort',title:'分类',width:80},
			    {field:'content',title:'摘要',width:200},
			    {field:'comment',title:'评论数',width:50},
			    {field:'opt',title:'操作', width:80,
					formatter: function(value,row,index){
						return "<a href='javascript:void(0)' onclick='editData("+JSON.stringify(row)+")'>编辑</a> <a href='javascript:void(0)' onclick='deletePop()'>删除</a><a href='javascript:void(0)' onclick=''>评论</a>"
					}
				}
		    ]],
		    onDblClickRow(index,row){
		    	editData(row);
		    }
		});
	}
	//修改
	function editData(row){
		
		$('#ff').form('load',row);//加载数据
		
		$('#dlg').dialog('open');
	}
	//删除提示
	function deletePop(){
		$('#w').dialog('open');
	}
//	增加删除提示
	function addPop(){
		$('#dlg').dialog('open');
	}
	//组织删除
	function cancelRemove(){
		$('#w').dialog('close');
		$("#dg").datagrid("reload");
	}
</script>
